page-message-overview {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-content{
        .content-ios{
            background: #fcfcfc;
        }
        .search-key-wrapper{
            background:linear-gradient(to right, #63b24c, #018c6e);
            border:none;
            border-radius:6vw;
            display:flex;
            align-items: center;
            width:88.89vw;
            height: 11.57vw;
            margin:5.55vw auto;
            i{
                width:4.5vw;
                height:4.5vw;
                margin:auto 3vw auto 2vw;
                background-image:url(../assets/images/client/client-list/icon_search.png);
                background-size:cover;
                background-repeat:no-repeat;
            }
            input{
                width:68vw;
                margin-left: 7.5vw;
                background:none;
                height:7vw;
                border:none;
                font-size:3.89vw;
                margin-right: 0;
                color:#fff;
                &::placeholder{
                    color:#fff;
                }

            }
        }
        .info-hd {
            margin-top: computed-vw(60);
            margin-bottom: computed-vw(60);
            padding-left: computed-vw(60);
            overflow: hidden;
            .search-bar {
                float: left;
                width: computed-vw(1080-120-220-30);
                height: computed-vw(124);
                padding: 0 10vw 0 5vw;
                background: linear-gradient(to right, #63b24c, #018c6e);
                border-radius: computed-vw(62);
                position: relative;
                input {
                    height: 100%;
                    font-size: computed-vw(45);
                    border: none;
                    padding: 0;
                    background:none;
                    color: #fff;
                    width:100%;
                    &::placeholder {
                        color: rgba(255, 255, 255, 0.5);
                    }
                    &:focus {
                        outline: none;
                        border: none;
                    }
                }
                i {
                    position: absolute;
                    width: 4.5vw;
                    height: 4.5vw;
                    top: (computed-vw(124) - 4.5)/2;
                    background-image: url(../assets/images/client/client-filter/icon_search.png);
                    background-size: 100% 100%;
                    right:5vw;
                }
            }
            .button-ios {
                margin: 0 0 0 computed-vw(30);
                font-size: computed-vw(45);
                color: #fff;
                background-color: #f2b91c;
                height: computed-vw(124);
                border-radius: computed-vw(62);
                width: computed-vw(220);
                text-align: center;
            }
        }
        ion-list{
            padding:0 computed-vw(60);
            ion-item{
                height:computed-vw(165);
                padding:0!important;
                border-top: 0!important;
                .item-inner{
                    padding:0!important;
                    .label-ios{
                        color:#333;
                        font-size: 5vw!important;
                        margin:0!important;
                    }
                }
                ion-badge.badge-ios{
                    background-color: #dcac6e;
                    color: #fff;
                    border-radius: 5vw;
                    min-width: 5vw;
                    height: 5vw;
                    line-height: 5.4vw;
                    text-align: center;
                    padding: 0 1vw;
                    margin-right: computed-vw(30)!important;
                }
                ion-icon{
                    margin: 0 !important;
                    display: flex;
                    align-items: center;
                    height: 100%;
                    img{
                        width: 2.22222vw;
                        height: 2.22222vw;
                        margin-left: 2.77778vw;
                        margin-top: -0.2vw;
                    }
                }
            }
            ion-item::after{
                bottom:-1px!important;
            }
        }
    }
}
